<template>
  <div class="container">
    <div class="title">Card组件Demo</div>
    <CardDemo1></CardDemo1>
    <CardDemo4></CardDemo4>
    <CardDemo3></CardDemo3>
    <CardDemo2></CardDemo2>
  </div>
</template>

<script setup lang="ts">
import CardDemo1 from "./../components/Card/CardDemo1.vue";
import CardDemo2 from "./../components/Card/CardDemo2.vue";
import CardDemo3 from "./../components/Card/CardDemo3.vue";
import CardDemo4 from "./../components/Card/CardDemo4.vue";
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  padding: 50px 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  .title {
    font-size: 36px;
    margin-bottom: 25px;
    margin-left: 50px;
  }
}
</style>
